<template>
    <div class="nav_bar"
         v-nav-bar="{
                activeId,
                className: 'nav_item',
                activeClass: 'nav_active'
            }"
    >
        <!--:class="['nav_item', {'nav_active':index === activeId}]"-->
        <div class="nav_item"
             v-for="(item, index) of items"
             :key="index"
             @click="changeNav(index)"
        >
            {{item}}
        </div>
        <!--<h2 v-my-if="isShow">这是标题</h2>-->
        <h2>------------------------------</h2>
        <!--<h2 flag="true" class="h2Style" v-my-bind:class="['nav_item', {'nav_active':isActiveId === activeId}]">这是标题</h2>-->


        <h2 v-my-bind:flag="isShow">这是标题2</h2>
    </div>
</template>

<script>

    import navBar from "../directives/navBar"
    import myIf from "../directives/myIf"
    import myBind from "../directives/myBind"

    export default {

        components: {},

        directives: {
            navBar,
            myIf,
            myBind
        },

        data() {
            return {
                isShow: "这是flag的内容",
                isActiveId: 0,
                activeId: 0,
                items:[
                    "选项0",
                    "选项1",
                    "选项2",
                    "选项3",
                ]
            };
        },

        methods: {
            changeNav(index){
                this.activeId = index;
            }
        }
    };
</script>

<style scoped>
    .nav_bar{
        margin: 50px auto;
        border: 1px solid #000;
        width: 500px;
        height: 50px;
    }

    .nav_item{
        float: left;
        width: 25%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        user-select: none;
    }

    .nav_active{
        background-color: #000;
        color: #fff;
    }
</style>
